<template>
    <div class="countorder">
        <!-- 时间范围 -->
        <header class="block">
            <span class="demonstration">时间范围</span>
            <el-date-picker v-model="date" size=mini type="datetimerange" range-separator="至" start-placeholder="开始日期"
                end-placeholder="结束日期">
            </el-date-picker>
            <el-button type="primary" @click="onSubmit" size="mini" style="margin-left:20px">查询</el-button>
        </header>
        <!-- 数据图表 -->
        <section class="main" ref="main"></section>
    </div>
</template>
<script>
import * as echarts from 'echarts';
import { ordertotal } from '@/api/order.js'
export default {
    destroyed () {
        window.onresize = null
    },
    mounted () {
        //重置大小
        window.onresize = function () {
            myChart.resize()
        }

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(this.$refs.main);
        // 绘制图表
        myChart.setOption({
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },

            legend: {
                data: ['所有订单数据', '订单金额']
            },
            xAxis: [
                {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                    axisPointer: {
                        type: 'shadow'
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '所有订单数据',
                    min: 0,
                    max: 500,
                    interval: 50,
                    axisLabel: {
                        formatter: '{value} 单'
                    }
                },
                {
                    type: 'value',
                    name: '订单金额',
                    min: 0,
                    max: 50000,
                    interval: 2000,
                    axisLabel: {
                        formatter: '{value} 元'
                    }
                }
            ],
            series: [
                {
                    name: '所有订单数据',
                    type: 'bar',
                    tooltip: {
                        valueFormatter: function (value) {
                            return value + ' 单';
                        }
                    },
                    data: [
                        26, 59, 90, 264, 287, 707, 156, 122, 487, 188, 60, 23
                    ]
                },
                {
                    name: '订单金额',
                    type: 'line',
                    yAxisIndex: 1,
                    tooltip: {
                        valueFormatter: function (value) {
                            return value + '元';
                        }
                    },
                    data: [2000, 2200, 3300, 4500, 6300, 10200, 20300, 23400, 23000, 16500, 12000, 6200]
                }
            ]
        });
    },
    data () {
        return {
            date: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
        }
    },
    methods: {
        onSubmit () {
            console.log(this.date);
        },
    },
    async created () {
        let res = await ordertotal({ date: '[]' })
    }

}
</script>

<style lang="less" scoped>
.countorder {

    // 数据图表
    .main {
        margin-top: 40px;
        width: 100%;
        height: 500px;

    }
}
</style>